<template>
  <div>
    <h3>请选择您的地址</h3>
    <RegionSelector
      v-model:province="formData.province"
      v-model:city="formData.city"
      v-model:district="formData.district"
      @change="handleRegionChange"
    />
    
    <div v-if="formData.district" class="selected-region">
      您选择的地址: {{ formData.province }} {{ formData.city }} {{ formData.district }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import RegionSelector from '@/components/common/Region/Regionselector.vue';

const formData = reactive({
  province: '北京市', // 默认值
  city: '北京市',
  district: '东城区'
});

function handleRegionChange(region: any) {
  console.log('地区选择变化:', region);
  // 这里可以执行表单验证或其他逻辑
}
</script>